<template>
  <view class="h-hs0">
    <!-- 一个轮播图 -->
    <swiper next-margin="114px">
      <swiper-item v-for="(item, index) in srcList" :key="index">
        <y_card :src="item.img" :num="item.num" width="195"></y_card>
      </swiper-item>
    </swiper>

    <view class="hs0-c">
      <text>热门创作者</text>
      <text>查看全部</text>
    </view>
    <swiper display-multiple-items="3" next-margin="50px" class="dex-us-sw">
      <swiper-item v-for="(item, index) in userList" :key="index">
        <image src="/static/23.jpg" mode="aspectFit"></image>
        <text>{{ item.name }}</text>
        <text>粉丝 {{ item.num }}K</text>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { img: "/static/23.jpg", name: "小五", num: "8.2" },
        { img: "/static/23.jpg", name: "懂", num: "8.2" },
        { img: "/static/23.jpg", name: "宇哥", num: "8.2" },
        { img: "/static/23.jpg", name: "云天", num: "8.2" },
        { img: "/static/23.jpg", name: "罗伯特", num: "8.2" },
        { img: "/static/23.jpg", name: "玛丽", num: "8.2" },
        { img: "/static/23.jpg", name: "山姆大叔", num: "8.2" },
        { img: "/static/23.jpg", name: "辣个男人", num: "8.2" },
      ],
      srcList: [
        {
          img: "/static/34.jpg",
          num: "5.0",
        },
        {
          img: "/static/34.jpg",
          num: "4.6",
        },
        {
          img: "/static/34.jpg",
          num: "4.6",
        },
        {
          img: "/static/34.jpg",
          num: "4.6",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss">
.dex-us-sw {
  margin-top: 20px;

  uni-swiper-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    > text:nth-child(2) {
      margin-top: 10px;
      color: #1c2238;
      line-height: 18px;
      font-size: 16px;
    }
    > text:nth-child(3) {
      color: #616161;
      line-height: 14px;
      font-size: 12px;
    }
  }
  image {
    width: 77px;
    height: 77px;
	border-radius: 15px;
  }
}

.h-hs0 {
  margin-top: 20px;
  uni-swiper {
    height: 250px !important;
  }
}

uni-swiper:nth-child(1) {
  height: 320px !important;
}

.hs0-c {
  display: flex;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;
  padding-right: 30px;
  text:nth-child(1) {
    font-size: 17px;
    font-weight: bold;
  }

  text:nth-child(2) {
    font-size: 14px;
    color: #3544c4;
    margin-left: auto;
  }
}
</style>